<template>
  <div>
    <router-view />
    <van-tabbar v-model="active" active-color="#fe6641" style="z-index:999">
      <van-tabbar-item to="/">
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? homeIcon.active : homeIcon.normal" />
        </template>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/merchant">
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? merchantIcon.active : merchantIcon.normal" />
        </template>
        找商家
      </van-tabbar-item>
      <van-tabbar-item to="/circle">
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? circleIcon.active : circleIcon.normal" />
        </template>
        圈子
      </van-tabbar-item>
      <van-tabbar-item to="/mine">
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? mineIcon.active : mineIcon.normal" />
        </template>
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      homeIcon: {
        normal: require("../../assets/img/home/tabBar_icon/首页icon1@3x.png"),
        active: require("../../assets/img/home/tabBar_icon/首页icon2@3x.png")
      },
      merchantIcon: {
        normal: require("../../assets/img/home/tabBar_icon/找商家icon1@3x.png"),
        active: require("../../assets/img/home/tabBar_icon/找商家icon2@3x.png")
      },
      circleIcon: {
        normal: require("../../assets/img/home/tabBar_icon/圈子icon1@3x.png"),
        active: require("../../assets/img/home/tabBar_icon/圈子icon2@3x.png")
      },
      mineIcon: {
        normal: require("../../assets/img/home/tabBar_icon/我的icon1@3x.png"),
        active: require("../../assets/img/home/tabBar_icon/我的icon2@3x.png")
      }
    };
  }
};
</script>

<style lang="less" scoped>
.van-tabbar {
  height: 58px;
}
.van-tabbar-item__icon img {
  display: block;
  width: 22px;
  height: 20px;
}
.van-tabbar-item__text {
  sapn {
    font-size: 12px;
    color: #969b9e;
  }
}
</style>


